{% extends "base.html" %}

{% block content %}
<h2>Add Expense</h2>

<!-- Display the current budget and remaining balance -->
<div>
    <h3>Monthly Budget: {{ budget }}</h3>
    <h3>Remaining Balance: {{ balance }}</h3>
</div>

<!-- Expense Form -->
<form method="POST" class="expense-form">
    {{ form.hidden_tag() }}

    <!-- Amount Field -->
    <div class="form-group cool-date-field">
        {{ form.amount.label(class="form-label") }}
        {{ form.amount(class="form-control", placeholder="Enter amount") }}
        {% for error in form.amount.errors %}
            <div class="text-danger">{{ error }}</div>
        {% endfor %}
    </div>

    <!-- Category Field -->
    <div class="form-group cool-date-field">
        {{ form.category.label(class="form-label") }}
        {{ form.category(class="form-control", placeholder="Select a category") }}
        {% for error in form.category.errors %}
            <div class="text-danger">{{ error }}</div>
        {% endfor %}
    </div>

    <!-- Description Field -->
    <div class="form-group cool-date-field">
        {{ form.description.label(class="form-label") }}
        {{ form.description(class="form-control", placeholder="Add a description (optional)") }}
        {% for error in form.description.errors %}
            <div class="text-danger">{{ error }}</div>
        {% endfor %}
    </div>
<!-- Date Field -->
<div class="form-group cool-date-field">
    {{ form.date.label(class="form-label") }}
    {{ form.date(class="form-control stylish-input", placeholder="Select a date") }}
    {% for error in form.date.errors %}
        <div class="text-danger">{{ error }}</div>
    {% endfor %}
</div>


   <!-- Form Actions -->
<div class="form-actions">
    {{ form.submit(class="btn btn-primary") }}
    <button type="button" class="cancel" onclick="window.location='{{ url_for('dashboard') }}'">Cancel</button>
</div>

</form>
{% endblock %}